<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/index.css" rel="stylesheet">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="home">
        <table cellspacing="10px">
            <tr>
                <td rowspan="2" >
                 <img src="images/mi-logo.png" style="background-color: rgb(245, 102, 0);" width="60px" height="60px">
                </td>
                <td class="home-one"><strong>小米商城</strong></td>
            </tr>
            <tr>
                <td class="home-two">让每个人都能享受科技的乐趣</td>
            </tr>
        </table>
    </div>
  
    <div class="bjtp">  

     
    </div>
    <div class="form" >
        <p class="login">
            <span class="active" id="active">账号登录</span>
            <span style="color:#e0e0e0">|</span>
            <span id="saoma">扫码登录</span>
        </p>
        <form>
        

        <div id="zh">
        <p class="phone">
            <input type="text" placeholder="邮箱/手机号/小米账号"/>
        </p>
        <p class="password">
            <input type="password" placeholder="密码"/>
        </p>
        <p class="submit">
            <input type="submit" value="登录"/>
        </p>
    
        </form>

        <p class="register">
        <span>注册小米账号</span>
        <span>|</span>
        <span>忘记密码?</span>
        </p>


      <div class="footer">
        <p class="qita">
        <span class="left"></span>
        其他方式登录
        <span class="right"></span>
        </p>

      <div class="AllIcon">
        <a href="#" ><span class="one"></span></a>
        <a href="#"><span  class="two"></span></a>
        <a href="#" ><span class="three"></span></a>
        <a href="#" ><span class="four"></span></a>
      </div>

      </div>

      </div>

      <div id="sm" style="display: none;">
        <img style="width: 240px;height: 195px;" src="images/ewm.png">
    </div>

</div>


    <div class="bottom">
       <p>简体&nbsp;|&nbsp;繁体&nbsp;|&nbsp;English&nbsp;|&nbsp;常见问题</p>
       <p class="bottom-one">小米公司版权所有-京ICP备10046444-<img src="images/gaj.png">-京公网安备11010802020134-京ICP证110507号</p>
    </div>

    <script>
        $("span#active").click(function(){
            $("div#sm").hide();
            $("div#zh").show();
            //找到sm并隐藏
            //找到zh并显示
            $(this).addClass("active");
            $("span#saoma").removeClass("active");
            //加个class="active"
            //删除class="avtive"
        })
        $("span#saoma").click(function(){
          
            $("div#zh").hide();
            $("div#sm").show();
            $(this).addClass("active");
            $("span#active").removeClass("active");
        })
    </script>
</body>
</html>